{% extends "base.html" %}

{% block title3 %}
    active
{% endblock %}

{% block page-body %}
    <h1 class="page-header">信息查询</h1>

    <!--面板 开始-->
    <div class="panel panel-primary">
    <div class="panel-heading">主机用户密码</div>
    <div class="panel-body">
    <div class="row">

        <div class="col-md-4" style="padding-bottom: 4px">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
            </div><!-- /input-group -->
        </div>
        <div class="col-md-1  pull-right" style="padding-bottom: 3px">
            <button id="add-btn" class="btn btn-success btn-sm" data-toggle="modal">添加
            </button>
        </div>

    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>IP</th>
            <th>用户</th>
            <th>密码</th>
            <th>root密码</th>
            <th>批量管理</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for user in userinfo %}
            <tr>
                <td user_id="{{ user.id }}">{{ forloop.counter }}</td>
                <td>{{ user.ip }}</td>
                <td>{{ user.user }}</td>
                <td>{{ user.password }}</td>
                <td>{{ user.root_password }}</td>
                <td>{{ user.management }}</td>
                <td>
                    <a class="btn btn-warning btn-sm" href="/edit_userinfo/?id={{ user.id }}">修改</a>
                    <a class="btn btn-danger btn-sm" href="/userinfo_del/?id={{ user.id }}">删除</a>
                    <button class="btn btn-danger btn-sm del-btn" data-toggle="modal"
                    ">对话框删除</button>
                    <button class="btn btn-warning btn-sm edit-btn" data-toggle="modal">对话框修改</button>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <nav class="pull-right" aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!--面板body 结束-->





    <!--模态框修改开始 -->
    <div class="modal fade" id="EditModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">主机用户密码修改</h4>
                </div>
                <div class="modal-body">
                    {#                    <label style="display: none;" for="userid"></label>#}
                    <input type="text" style="display: none;" id="userid">
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6 ">
                            <div class="form-group  pull-right">
                                <label class="control-label" for="ip">IP</label>
                                <input name="ip" type="text" class="form-control" id="ip">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label class="control-label" for="user">账户</label>
                                <input name="user" type="text" class="form-control" id="user">
                            </div>
                        </div>


                    </div>
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label for="password">密码</label>
                                <input name="password" type="text" class="form-control" id="password"
                                       value="{{ user_obj.password }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label for="rootpwd">root密码</label>
                                <input name="rootpwd" type="text" class="form-control" id="rootpwd"
                                       value="{{ user_obj.root_password }}">
                            </div>
                        </div>
                    </div>
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6">
                            <div class="form-group  pull-right"><strong>批量管理</strong>
                                <select id="management" name="management" class="form-control">
                                    <option value="可以">YES</option>
                                    <option value="不可以">NO</option>
                                    <option value="">未知</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" name="operating" value="1" class="btn btn-success pull-right"
                                    id="xg">更新
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div
            <!--模态框修改 结束 -->


            <!--模态框添加 开始 -->
    <div class="modal fade" id="add-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">主机用户密码添加</h4>

                </div>
                <div class="modal-body">
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6 ">
                            <div class="form-group  pull-right">
                                <label class="control-label" for="ip1">IP</label>
                                <input type="text" class="form-control" id="ip1"
                                       value="10.">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label class="control-label" for="user1">账户</label>
                                <input type="text" class="form-control" id="user1"
                                       value="aqjg">
                            </div>
                        </div>

                    </div>
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label for="password1">密码</label>
                                <input type="text" class="form-control" id="password1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group  pull-right">
                                <label for="rootpwd1">root密码</label>
                                <input type="text" class="form-control" id="rootpwd1">
                            </div>
                        </div>
                    </div>
                    <div class="row form-inline" style="padding-top: 3px">
                        <div class="col-md-6">
                            <div class="form-group  pull-right"><strong>批量管理</strong>
                                <select id="management1" class="form-control">
                                    <option value="可以">YES</option>
                                    <option value="不可以">NO</option>
                                    <option selected value="">未知</option>
                                </select>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-sm pull-right" id="tj">添加</button>
                </div>
            </div>
        </div>


    </div>
    <!--模态框添加 结束 -->

    <!--模态框删除 开始 -->
    <div class="modal fade" id="Del-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">主机用户密码删除</h4>
                </div>
                <div class="modal-body">
                    <input type="text" style="display: none;" id="userid2">
                    <h4 class="text-center">确定删除??</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-sm pull-right" id="del">删除</button>
                </div>
            </div>
        </div>


    </div>
    <!--模态框删除 结束 -->


{% endblock %}

{% block page-script %}
    <script type="text/javascript">
        $("#add-btn").on('click', function () {
            $('#add-modal').modal('show');
        });
        $(".del-btn").on('click', function () {
            $('#Del-modal').modal('show');
            var td = $(this).parent().prevAll();
            var user_id = $(td[5]).attr("user_id");
            $("#userid2").val(user_id);

        });

        $(".edit-btn").on('click', function () {
            $('#EditModal').modal('show');
            var td = $(this).parent().prevAll();
            var uid = $(td[5]).attr("user_id");
            var ip = $(td[4]).text();
            var user = $(td[3]).text();
            var password = $(td[2]).text();
            var rootpwd = $(td[1]).text();
            var management = $(td[0]).text();

            $("#userid").val(uid);
            $("#ip").val(ip);
            $("#user").val(user);
            $("#password").val(password);
            $("#rootpwd").val(rootpwd);
            $("#management").val(management);


        });

        $("#tj").on('click', function () {
            $.ajax({
                url: '/modal_add_userinfo/',
                type: "POST",
                data: {
                    'ip': $("#ip1").val(),
                    'user': $("#user1").val(),
                    'password': $("#password1").val(),
                    'rootpwd': $("#rootpwd1").val(),
                    'management': $("#management1").val(),
                },
                success: function (status) {
                    <!--不能删除 -->

                    {#if (status = "ok") {#}
                    {#    alert("添加成功");#}
                    {#    location.href = '/userinfo/';#}
                    {#/} else {#}
                    {#    alert("添加失败")#}
                    {#/}#}
                    <!--不能删除 -->

                    status = JSON.parse(status);
                    if (status.status) {
                        alert("添加成功");
                        location.reload();
                    } else {
                        alert(status.message);
                    }
                }
            })
        });


        $("#xg").on('click', function () {
            $.ajax({
                url: '/edit_userinfo/',
                type: "POST",
                data: {
                    'user_id': $("#userid").val(),
                    'ip': $("#ip").val(),
                    'user': $("#user").val(),
                    'password': $("#password").val(),
                    'rootpwd': $("#rootpwd").val(),
                    'management': $("#management").val(),
                },
                success: function (data) {
                    if (data = "ok") {
                        alert("修改成功");
                        console.log(data);
                        location.href = '/userinfo/';
                    } else {
                        alert("修改失败");
                        console.log(data);
                    }
                }
            })
        });

        $("#del").on('click', function () {
            $.ajax({
                url: '/userinfo_del/',
                type: "POST",
                data: {
                    'id': $("#userid2").val(),
                },
                success: function (data) {
                    if (data = "ok") {
                        location.href = '/userinfo/';
                    }
                }
            })
        })


    </script>
{% endblock %}
<!--不能删除 -->
<!--
function validateForm() {
var strIP = $("#ip1").val();
if (strIP = null || strIP = "") {
alert("IP地址须不能为空");
return false;
}

var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g;
if (re.test(strIP)) {
if (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) return true;
} else {
alert("IP地址有误");
return false;
}

}
-->
<!--不能删除 -->
